<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <header class="c1000 flex-between">
      <img src="./assets/img.png" class="logo" />
      <nav>
        <!-- 原购物车下拉框已删除 -->
      </nav>
    </header>

    <!-- 主体内容区域 -->
    <main class="c1000">
      <router-view
        @login-success="handleLoginSuccess" />
    </main>

    <!-- 底部导航栏 -->
    <footer class="c1000 flex-center">
      <el-button @click="goToHome" icon="el-icon-house" type="text">首页</el-button>
      <el-button @click="goToFilter" icon="el-icon-location" type="text">筛选</el-button>
      <el-button @click="toggleUserCenter" icon="el-icon-user" type="text">
        <span v-if="user === null">个人中心</span>
        <span v-else>{{ user.username }}</span>
      </el-button>
    </footer>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      dialogFormVisible: false,
      form: { username: "", password: "" },
      user: null,
      userCenterVisible: false,
    };
  },
  created() {
    this.checkUserStatus();
  },
  methods: {
    // 检查用户登录状态
    checkUserStatus() {
      let sessionId = sessionStorage.getItem("sessionId");
      let user = sessionStorage.getItem("user");
      if (user && sessionId) {
        this.user = JSON.parse(user);
      }
    },
    handleLoginSuccess(user) {
      this.user = user;
      sessionStorage.setItem("sessionId", user.sessionId);
      sessionStorage.setItem("user", JSON.stringify(user));
      this.$message("登录成功！");
    },
    toggleUserCenter() {
      if (this.user === null) {
        this.$router.push("/Login");
      } else {
        this.$router.push("/userDetail");
      }
    },
    goToHome() {
      this.$router.push("/");
    },
    goToFilter() {
      this.$router.push("/filter");
    },
    logout() {
      sessionStorage.removeItem("sessionId");
      sessionStorage.removeItem("user");
      this.user = null;
      this.$message("退出成功！");
    }
  }
};
</script>

<style scoped>
/* 头部样式 */
header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo {
  height: 80px;
  width: auto;
}

header nav {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}

/* 主体区域 */
main {
  padding: 20px;
}

/* 底部导航栏 */
footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  background-color: #f1f1f1;
  position: fixed;
  bottom: 0;
  width: 100%;
}

footer div {
  cursor: pointer;
  text-align: center;
}

footer .user-avatar {
  height: 30px;
  width: 30px;
  border-radius: 50%;
}

/* 弹窗按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
